<template>
  <div style="position: relative;max-width: 1440px">
    <h1 style="margin-bottom: 20px">办理</h1>
    <div class="ring_bg">
      <div>
        <span>{{ orderInfo.bussinessTypeName }}</span>
        <el-button type="primary" style="float: right;height: 30px;line-height: 30px;padding: 0 10px;"><span
            class="iconfont icon-download"></span> &nbsp;下载到本地
        </el-button>
      </div>
      <div>
        <div class="template-form">
          <el-form :model="orderInfo" label-width="100px" class="template-form__list">
            <div style="font-size: 30px;font-weight: bolder;margin-bottom: 10px">
              <span class="iconfont icon-dianxin" style="color: #489af6;font-size: 30px;margin-right: 10px"></span>
              {{ orderInfo.cardNo }}
            </div>
            <div style="margin-left: 40px">
              <el-tag style="line-height: 24px;height: 24px">最低消费套餐：{{ orderInfo.cardPackageName }}</el-tag>
              <el-tag style="line-height: 24px;height: 24px" v-if="!!orderInfo.cardAaaaPackageName">
                靓号类型：{{ orderInfo.cardAaaaPackageName }}
              </el-tag>
              <el-tag style="line-height: 24px;height: 24px">最低预存：{{ orderInfo.minPreStorm }}</el-tag>
              <el-tag style="line-height: 24px;height: 24px">合约期：{{ orderInfo.contractPeriod }}</el-tag>
              <el-tag style="line-height: 24px;height: 24px">开卡费：{{ orderInfo.cardOpeningFee }}</el-tag>
            </div>
            <el-divider style="border: dashed"></el-divider>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="单号：">
                  {{ orderInfo.id }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="提交时间：">
                  {{ orderInfo.createTime }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="选择套餐：">
                  <span style="font-size: 12px">
                    {{ orderInfo.orderPackageName }}
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="22">
                <el-form-item label="身份证照片：">
                  <el-upload action="#" list-type="picture-card" style="float: left" ref="upload1" :auto-upload="false"
                             :file-list="idCardZmList">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                      <img class="el-upload-list__item-thumbnail"
                           :src="file.url" alt="">
                      <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview"
                              @click="handlePictureCardPreview(file)">
                          <i class="el-icon-zoom-in"></i>
                        </span>
                        <span v-if="userInfo.isSuperAdmin==='1' || userInfo.userType==='01'" class="el-upload-list__item-delete" @click="handleDownload(file)">
                          <i class="el-icon-download"></i>
                        </span>
                      </span>
                    </div>
                  </el-upload>
                  <el-upload action="#" list-type="picture-card" style="float: left" ref="upload2" :auto-upload="false"
                             :file-list="idCardFmList">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                      <img class="el-upload-list__item-thumbnail"
                           :src="file.url" alt="">
                      <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview"
                              @click="handlePictureCardPreview(file)">
                          <i class="el-icon-zoom-in"></i>
                        </span>
                        <span class="el-upload-list__item-delete" v-if="userInfo.isSuperAdmin==='1' || userInfo.userType==='01'" @click="handleDownload(file)">
                          <i class="el-icon-download"></i>
                        </span>
                      </span>
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" style="font-size: 12px;">
                <el-form-item label="身份证头像：">
                  <img :src="orderInfo.idCardPhoto" style="WIDTH: 124px; HEIGHT: 150px"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="用户姓名：">
                  <span style="font-size: 12px">
                    {{ orderInfo.userName }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="12" style="font-size: 12px;">
                <el-form-item label="身份证号：">
                  {{ orderInfo.idCardNo }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="22">
                <el-form-item label="半身照片：">
                  <el-upload action="#" list-type="picture-card" style="float: left" ref="upload3" :auto-upload="false"
                             :file-list="halfPhotoUrlList">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                      <img class="el-upload-list__item-thumbnail"
                           :src="file.url" alt="">
                      <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview"
                              @click="handlePictureCardPreview(file)">
                          <i class="el-icon-zoom-in"></i>
                        </span>
                        <span class="el-upload-list__item-delete" v-if="userInfo.isSuperAdmin==='1' || userInfo.userType==='01'" @click="handleDownload(file)">
                          <i class="el-icon-download"></i>
                        </span>
                      </span>
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10" v-if="orderInfo.businessType==='NEW_CARD_FUSE'">
              <el-col :span="12">
                <el-form-item label="区域：">
                  <span style="font-size: 12px;">
                    {{ orderInfo.areaName }}
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10" v-if="orderInfo.businessType==='NEW_CARD_FUSE'">
              <el-col :span="12">
                <el-form-item label="详细地址：">
                  {{ orderInfo.address }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12" style="width: 100%;">
                <el-form-item label="备注：">
                  <div class="ring_text_area" v-html="orderInfo.remarks" style="margin-bottom: 40px"></div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="30%">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <div class="ring_bg" style="margin-bottom: 70px">
      <span class="ring_title">业务流程</span>
      <business-process v-if="orderInfo.id" :id="orderInfo.id"></business-process>
    </div>
    <div
        style="position: fixed;width: calc(100% - 240px);width: -moz-calc(100% - 240px);width: -webkit-calc(100% - 240px);bottom: 0;height: 70px;background: #fff;right: 0;box-shadow: 4px 4px 15px rgba(0,0,0,0.2)">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
               style="margin: 20px;">
        <el-form-item label="审批意见：" prop="reviewComments" style="margin-bottom: 0">
          <el-row :gutter="20" style="width: 100%">
            <el-col :span="12">
              <el-input v-model="ruleForm.reviewComments" clearable maxlength="50" show-word-limit></el-input>
            </el-col>
            <el-col :span="10">
              <el-button type="danger" @click="cancel">取消</el-button>
              <el-button type="danger" @click="rejectOrder">驳回</el-button>
              <el-button type="primary" @click="handleOrder">办结</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
import request from "@/utils/Request";
import BusinessProcess from "@/views/page/comp/BusinessProcess";
import {mapMutations} from 'vuex'
import {getImgBlob} from "@/utils/Common";

export default {
  name: "ShopOrderView",
  components: {BusinessProcess},
  data() {
    return {
      orderInfo: {},
      ruleForm: {reviewComments: ''},
      rules: {
        reviewComments: [
          {required: true, message: '请输入审批意见', trigger: 'blur'},
          {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
        ]
      },
      idCardZmList: [],
      idCardFmList: [],
      halfPhotoUrlList: [],
      dialogVisible: false,
      dialogImageUrl: ''
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload({name, url}) {
      this.downLoadImg(url, name);
    },
    downLoadImg(_blob, _name) {
      // 创建a标签，用于跳转至下载链接
      const tempLink = document.createElement('a')
      tempLink.style.display = 'none'
      tempLink.href = _blob
      tempLink.setAttribute('download', decodeURI(_name))
      // 兼容：某些浏览器不支持HTML5的download属性
      if (typeof tempLink.download === 'undefined') {
        tempLink.setAttribute('target', '_blank')
      }
      // 挂载a标签
      document.body.appendChild(tempLink)
      tempLink.click()
      document.body.removeChild(tempLink)
    },
    cancel() {
      this.$router.history.go(-1);
      this.removeTab('/HandleOrder')
    },
    async handleOrder() {
      const validatePromise = await new Promise((resolve) => {
        this.$refs.ruleForm.validate((v) => {
          resolve(v);
        });
      })
      if (!validatePromise) {
        return false;
      }
      const confirm = await this.$confirm('是否确认办结?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return true;
      }).catch(() => {
        return false;
      });
      if (!confirm) {
        return;
      }
      const loading = this.$loading({
        lock: true, text: '办理中...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'
      });
      request.post("/openCardOrder/handleOrder", {id: this.$route.query.id, ...this.ruleForm}).then(({data}) => {
        if (data.success) {
          this.$message({type: 'success', message: "办理成功"});
        } else {
          throw new Error(data.message)
        }
      }).catch(err => {
        this.$message({type: 'error', message: err.message});
        console.log(err)
      }).finally(() => {
        setTimeout(() => {
          loading.close();
          this.cancel();
        }, 3000)
      })
    },
    async rejectOrder() {
      const validatePromise = await new Promise((resolve) => {
        this.$refs.ruleForm.validate((v) => {
          resolve(v);
        });
      })
      if (!validatePromise) {
        return false;
      }
      const confirm = await this.$confirm('是否确认驳回?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return true;
      }).catch(() => {
        return false;
      });
      if (!confirm) {
        return;
      }
      const loading = this.$loading({
        lock: true, text: '驳回中...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'
      });
      request.post("/openCardOrder/rejectOrder", {id: this.$route.query.id, ...this.ruleForm}).then(({data}) => {
        if (data.success) {
          this.$message({type: 'success', message: "驳回成功"});
        } else {
          throw new Error(data.message)
        }
      }).catch(err => {
        this.$message({type: 'error', message: err.message});
        console.log(err)
      }).finally(() => {
        setTimeout(() => {
          loading.close();
          this.cancel();
        }, 3000)
      })
    },
    init() {
      request.get("/openCardOrder/info", {params: {id: this.$route.query.id}}).then(({data}) => {
        if (data.success) {
          this.orderInfo = data.data;
          let idCardZmPath = this.orderInfo.idCardZmPath;
          if (!!idCardZmPath) {
            getImgBlob(idCardZmPath, 'file1').then(url => {
              // this.$set(this.orderInfo, 'idCardZmUrl', url);
              let strings = idCardZmPath.split('/');
              this.idCardZmList = [{name: strings[strings.length - 1], url: url}]
            });
          }
          let idCardFmPath = this.orderInfo.idCardFmPath;
          if (!!idCardFmPath) {
            getImgBlob(idCardFmPath, 'file2').then(url => {
              // this.$set(this.orderInfo, 'idCardFmUrl', url);
              let strings = idCardFmPath.split('/');
              this.idCardFmList = [{name: strings[strings.length - 1], url: url}]
            });
          }
          let halfPhotoPath = this.orderInfo.halfPhotoPath;
          if (!!halfPhotoPath) {
            getImgBlob(halfPhotoPath, 'file3').then(url => {
              // this.$set(this.orderInfo, 'halfPhotoUrl', url);
              let strings = halfPhotoPath.split('/');
              this.halfPhotoUrlList = [{name: strings[strings.length - 1], url: url}]
            });
          }
        } else {
          throw new Error()
        }
      }).catch(err => {
        this.$message({type: 'error', message: "查询工单信息"});
        console.log(err)
      })
    },
    ...mapMutations(['removeTab'])
  },
  computed: {
    userInfo() {
      return JSON.parse(localStorage.getItem('userInfo')) || {};
    },
  },
  watch: {
    idCardZmList(newValue, oldValue) {
      this.$refs.upload1.$children[1].$el.style.display = "none";
    },
    idCardFmList(newValue, oldValue) {
      this.$refs.upload2.$children[1].$el.style.display = "none";
    },
    halfPhotoUrlList(newValue, oldValue) {
      this.$refs.upload3.$children[1].$el.style.display = "none";
    },
  },
}
</script>

<style scoped>

.ring_text_area {
  border: 1px solid #EBEEF3;
  height: 4em;
  font-size: 12px;
  margin-bottom: 10px;
  width: 100%;
  padding: 2px 10px;
  background: #fafafa;
  border-radius: 3px;
}

body {
  position: relative;
}

.ring_bg {
  padding: 20px;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #EBEEF3;
  margin-top: 20px;
}

.ring_title {
  line-height: 20px;
  margin-bottom: 20px;
  display: block;
}

</style>